<template>
  <a-row :gutter="10">
    <a-col>
      <a-card :bordered="false">
        <div>
          <div style=" font-weight: bold;">议题基础信息</div>
          <a-divider></a-divider>
          <a-form layout="inline">
            <a-row :gutter="10">
              <a-col :md="8" :sm="12">
                <a-form-item label="会议议题" style="margin-left:8px">
                  <a-input placeholder="请输入" v-model="username" style="width: 300px;"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item label="提交单位" style="margin-left:8px">
                  <a-input placeholder="请输入" v-model="username" style="width: 300px;"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item label="提交时间" style="margin-left:8px">
                  <a-date-picker
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期"
                    v-model="submitDateTime"
                    style="width: 300px;"
                  ></a-date-picker>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="8" :sm="12">
                <a-form-item label="会议次数" style="margin-left:8px">
                  <a-input placeholder="请输入" v-model="username" style="width: 300px;"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item label="汇报人员" style="margin-left:8px">
                  <a-input placeholder="请输入" v-model="username" style="width: 300px;"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item label="议题类型" style="margin-left:8px">
                  <a-input placeholder="请输入" v-model="username" style="width: 300px;"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
    </a-col>
    <a-col style="padding-top: 15px;">
      <a-card :bordered="false">
        <div style="padding-bottom: 10px; font-weight: bold;">会议纪要</div>
        <div v-for="(item, index) in textAreas" :key="index" style="margin-bottom: 10px;">
          <a-input type="textarea" rows="4" placeholder="请输入备注" v-model="item.value"></a-input>
        </div>
        <a-button style="margin-top: 10px;" @click="addTextArea"> <a-icon type="plus" />继续添加</a-button>
      </a-card>
    </a-col>
    <a-row :gutter="10" style="padding-top: 15px;">
      <a-col :span="12">
        <a-card :bordered="false">
          <div style="padding-bottom: 10px; font-weight: bold;">请示文件</div>
          <a-upload
            :before-upload="beforeUpload"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :custom-request="customRequest"
            show-upload-list="false"
            :multiple="true"
            :action="uploadUrl"
          >
            <a-button> <a-icon type="upload" /> 添加文件 </a-button>
          </a-upload>
          <a-row :gutter="10" style="margin-top: 15px;">
            <a-col v-for="file in fileList" :key="file.uid" :span="8" style="margin-bottom: 10px;">
              <a-card :bordered="false">
                <a-img
                  v-if="file.type.startsWith('image/')"
                  :src="file.url || URL.createObjectURL(file.originFileObj)"
                  :alt="file.name"
                  style="width: 100%; height: auto;"
                />
                <div v-else>
                  <a-icon type="file" style="font-size: 24px;" />
                  <div>{{ file.name }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false">
          <div style="padding-bottom: 10px; font-weight: bold;">批量文件</div>
          <a-upload
            :before-upload="beforeUpload"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :custom-request="customRequest"
            show-upload-list="false"
            :multiple="true"
            :action="uploadUrl"
          >
            <a-button> <a-icon type="upload" /> 添加文件 </a-button>
          </a-upload>
          <a-row :gutter="10" style="margin-top: 15px;">
            <a-col v-for="file in fileList" :key="file.uid" :span="8" style="margin-bottom: 10px;">
              <a-card :bordered="false">
                <a-img
                  v-if="file.type.startsWith('image/')"
                  :src="file.url || URL.createObjectURL(file.originFileObj)"
                  :alt="file.name"
                  style="width: 100%; height: auto;"
                />
                <div v-else>
                  <a-icon type="file" style="font-size: 24px;" />
                  <div>{{ file.name }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24" style="padding-top: 15px;">
    <a-card :bordered="false">
      <div style="padding-bottom: 10px; font-weight: bold;">提交单位意见</div>
      <div style="display: flex; align-items: center;">
      <a-input style="width: 400px;margin: 10px;" placeholder="请输入" v-model="value"></a-input>
      <a-button style="margin-left: 10px;" @click="addTextArea"> 
          <a-icon type="plus" />添加文件
          </a-button>
        </div>
        <div style="padding-bottom: 10px; font-weight: bold;">部门意见</div>
      <div style="display: flex; align-items: center;">
        <a-input style="width: 400px;margin: 10px;" placeholder="请输入" v-model="value"></a-input>
      <a-button style="margin-left: 10px;" @click="addTextArea"> 
          <a-icon type="plus" />添加文件
          </a-button>
        </div>
        <div style="padding-bottom: 10px; font-weight: bold;">分管领导意见</div>
      <div style="display: flex; align-items: center;">
        <a-input style="width: 400px;margin: 10px;" placeholder="请输入" v-model="value"></a-input>
      <a-button style="margin-left: 10px;" @click="addTextArea"> 
          <a-icon type="plus" />添加文件
          </a-button>
        </div> <div style="padding-bottom: 10px; font-weight: bold;">党委委员会表决意见</div>
      <div style="display: flex; align-items: center;">
        <a-input style="width: 400px;margin: 10px;" placeholder="请输入" v-model="value"></a-input>
      <a-button style="margin-left: 10px;" @click="addTextArea"> 
          <a-icon type="plus" />添加文件
          </a-button>
        </div>
      </a-card>
    </a-col>
    <a-col :span="24" style="padding-top: 15px;">
  <a-card :bordered="false">
    <div style="display: flex; align-items: center;">
      <div style="font-weight: bold;">议题办结情况</div>
      <a-input placeholder="请输入" v-model="value" style="width: 200px; margin-left: 10px;"></a-input>
    </div>
    <div style="text-align: center; margin-top: 10px;">
      <a-button type="primary" @click="showDialog">转为代办</a-button>
    </div>
    <a-modal
     :visible="visible"
      title="转为待办"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <vxe-grid v-bind="gridOptions"></vxe-grid>
    </a-modal>
  </a-card>
</a-col>


    </a-row>
  </a-row>
</template>

<script>
export default {
  data() {
    return {
      textAreas: [{ value: '' }], // 初始时包含一个文本域
      textAreaValue: '',
      username: '',
      fileList: [],
      submitDateTime: null,
      visible: false,
      value:"",
      nodes: [{ value: '' }],
      gridOptions : {
      border: true,
      editConfig: {
        trigger: 'click',
        mode: 'row'
      }},
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', minWidth: 200, editRender: { name: 'input' } },
        { field: 'age', title: '数字', width: 200, editRender: { name: 'input', attrs: { type: 'number' } } },
        { field: 'date', title: '日期', width: 200, editRender: { name: 'input', attrs: { type: 'date' } } },
        { field: 'month', title: '月份', width: 200, editRender: { name: 'input', attrs: { type: 'month' } } },
        { field: 'week', title: '周', width: 200, editRender: { name: 'input', attrs: { type: 'week' } } },
        { field: 'time', title: '时间', width: 200, editRender: { name: 'input', attrs: { type: 'time' } } },
        { field: 'color', title: '颜色', width: 200, editRender: { name: 'input', attrs: { type: 'color' } } }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, date: '', time: '', month: '', week: '', color: '', address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, date: '', time: '', month: '', week: '', color: '', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, date: '2024-06-06', time: '10:30', month: '2024-06', week: '', color: '#571414', address: 'Shanghai' }
      ]
    }
  },
  methods: {
    addTextArea() {
      this.textAreas.push({ value: '' })
    },
    beforeUpload(file) {
      return true
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        // 上传成功后，添加文件到列表
        this.fileList = [...this.fileList, info.file]
      } else if (info.file.status === 'error') {
        // 上传失败
        this.$message.error(`${info.file.name} 文件上传失败.`)
      } else if (info.file.status === 'uploading') {
        // 上传中显示临时图片
        if (info.file.type.startsWith('image/')) {
          info.file.url = URL.createObjectURL(info.file.originFileObj)
        }
      }
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    customRequest({ file, onSuccess, onError }) {
      onSuccess()
    },
    showDialog() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    addNode() {
      this.nodes.push({ value: '' }); // 添加一个新的下拉框
    },
  },
  computed: {
    uploadUrl() {
      // Define your upload URL here
      return 'https://your-upload-url.com'
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

